/*****
thiz.config = $.extend({
	container: {},    //调用插件的容器（jquery对象）需要有宽高 包含左右盒子的直接父盒子
	leftMenuWidth:90, //左边Menu的width
	speed:0.5,       //动画完成时间 单位s
	dragBarWidth:1,  //拖拽盒子的width
	dragEnable:true //左侧Menu是否可以拖动 默认可以
	minWidth:40 //左邊不能拖动的最小距离
}, config);
*****/
;(function($) {
	var layout = {
			index : 0, //判断点击sideBars
			init: function(config) {
				var thiz = this;
				thiz.config = $.extend({
					container: {}, 
					leftMenuWidth:90,
					speed:0.5,
					dragBarWidth:2,
					dragEnable:true,
					minWidth:0
				}, config);
				
				thiz.initDom();    //初始化创建外层包含盒子
				thiz.config.container.resize(function(){
					thiz.resize();
				});
				return thiz;
			},
			initDom:function(){
				var thiz = this;
				var divArr = thiz.config.container.find(" > div"),
					cloneLeftCont = divArr.eq(0).remove(),
					cloneRightCont = divArr.eq(1).remove();
			//	thiz.config.container.find("div").remove();
				//包裹盒子
				var outerContainer = $('<div class="outerContainer">\
											<div class="outerLeft clearfix"></div>\
											<div class="outerRight"></div>\
										</div>');
				thiz.config.container.append(outerContainer);
				thiz.config.outerLeft = outerContainer.find(".outerLeft");  //外层包裹盒子
				thiz.config.outerRight = outerContainer.find(".outerRight");
				thiz.config.outerLeft.html(cloneLeftCont).append('<div class="outerDrag"></div>');
				thiz.config.outerRight.html(cloneRightCont);
				thiz.config.outerDrag = thiz.config.outerLeft.find(".outerDrag");
				thiz.config.outerLeft.css({
					"width":thiz.config.leftMenuWidth + "px",
					"position": "relative",
					"left": 0,
					"top": 0,
					"zIndex": "99",
					"borderRight": thiz.config.dragBarWidth +"px solid #d8e5f1"
				});
				thiz.config.outerDrag.css({
					width: thiz.config.dragBarWidth + "px",
					height:100+"%",
					background: "transparent",
					position: "absolute",
					top:0,
					left:thiz.config.outerLeft.width()+"px",
					cursor:"e-resize",
					display:"block",
					zIndex:999999999
				});
				thiz.config.outerRight.css({
					"width":thiz.config.container.width() - thiz.config.leftMenuWidth + "px",
					"position": "absolute",
					"right": 0,
					"top": 0
				});
				thiz.config.outerLeft.append("<div class='sideBars'><em></em></div>");
				//点击按钮左侧
				thiz.config.sideBars = thiz.config.outerLeft.find(".sideBars");
					thiz.config.sideBarsW = 15,
					thiz.config.sideHeight = 50;
				thiz.config.sideBars.css({
					width: thiz.config.sideBarsW+"px",
					height:thiz.config.sideHeight+"px",
					cursor:"pointer",	
					background:"#ccc",
					position: "absolute",
					right:0,
					top:50+"%",
					marginTop:-(thiz.config.sideHeight/2)+"px"
				});
				thiz.config.sideBars.on("click",function(){
					thiz.zoom($(this)); //点击sideBars 重新布局
				});
				$(".outerDrag").on("mousedown", function(ev){
					thiz.config.outerDrag.css({"background":"#d8e5f1"});
					if(thiz.config.dragEnable){
						thiz.dragMove($(this));
					}else{
						thiz.config.outerDrag.css({"background":"transparent"});
					}
				});
				
			},
			zoom:function(_this){
				var thiz = this;
				if(thiz.index == 0){
					thiz.config.outerLeft.animate({"left":-(thiz.config.outerLeft.width()+thiz.config.dragBarWidth)+"px"}, thiz.speed, function(){});
					thiz.config.outerRight.animate({"width":100+"%"}, thiz.speed, function(){});
					thiz.config.outerDrag.css({
						"left":-(thiz.config.outerLeft.width()) + "px"
					});
					_this.addClass("back").css({
						right:-(thiz.config.sideBarsW + thiz.config.dragBarWidth) + "px",
					});
					thiz.index++;
					
				}else{
					thiz.config.outerLeft.animate({"left":0}, thiz.speed, function(){});
					thiz.config.outerRight.animate({
						"width":(thiz.config.container.width() - thiz.config.outerLeft.width() - thiz.config.dragBarWidth)+"px"
					}, thiz.speed, function(){});
					thiz.config.outerDrag.css({
						"left":thiz.config.outerLeft.width()+"px"
					});
					_this.removeClass("back").css({
						right:0,
					});
					thiz.index--;
				}
			},
			dragMove:function( _this){
				var thiz = this,
					move = true,
					oEvent,dragLeft;
				$(document).on("mousemove",function(ev){
					if(move){
						oEvent = ev || window.event;
						var outerContainerPosition = thiz.getObjPos(thiz.config.container.find(".outerContainer")[0]);
						dragLeft = oEvent.clientX - outerContainerPosition.x;
						if(dragLeft >= thiz.config.container.width() - thiz.config.dragBarWidth){
							dragLeft = thiz.config.container.width() - thiz.config.dragBarWidth;
						}
						if(dragLeft <= thiz.config.minWidth){
							dragLeft = thiz.config.minWidth;
						}
						_this.css({left:dragLeft+"px"});
						thiz.config.outerLeft.width(dragLeft); 
						thiz.config.outerRight.width(thiz.config.container.width() - thiz.config.outerLeft.width() - thiz.config.dragBarWidth);
						thiz.config.outerDrag.css({"background":"transparent"});
					}
				}).on("mouseup",function(){
					move = false;
				});
			},
			cpos:function(x, y)  {  
				this.x = x;  
				this.y = y;  	
			} ,
			getObjPos:function(ATarget) { 
				var thiz =this;
				var target = ATarget;  
				var pos = new thiz.cpos(target.offsetLeft, target.offsetTop);  
				var target = target.offsetParent;  
				while (target)  
				{  
					pos.x += target.offsetLeft;  
					pos.y += target.offsetTop;  
					target = target.offsetParent  
				}  
				return pos;  
			},
			resize:function(){
				var thiz = this;
				if(thiz.config.sideBars.hasClass("back")){
					return;
				}else{
					thiz.config.outerRight.width(thiz.config.container.width() - thiz.config.outerLeft.width() - thiz.config.dragBarWidth);
				}
				thiz.config.sideBars.css({
					right:0
				});				
			}
	};
	$.extend({
		dragLayout: function(config) {
			return $.extend({}, layout).init(config);
		}
	});
})(jQuery);


